<template>
   <el-aside class="aside-box" :width="main.isCollapse ? '180px' : '63px'">
      <el-menu :collapse-transition="false" :collapse="!main.isCollapse" active-text-color="rgb(248, 152.1, 152.1)" text-color="#fff" background-color="#666" :default-active="$route.name" class="el-menu-vertical-demo">
         <!-- 标题 -->
         <h3 v-show="main.isCollapse"  class="aside-title">VUE后台</h3>
         <h3 v-show="!main.isCollapse" class="aside-title">VUE</h3>
         <el-menu-item @click="clickMenu(item)" v-for="item in onChildren()" :key="item.name" :index="item.name">
            <el-icon>
               <component class="icons" :is="item.icon"></component>
            </el-icon>
            <span>{{ item.label }}</span>
         </el-menu-item>


         <el-sub-menu v-for="item in hasChildren()" :key="item.icon" :index="item.icon">
            <template #title>
               <el-icon>
                  <component class="icons" :is="item.icon"></component>
               </el-icon>
               <span>{{ item.label }}</span>
            </template>

            <el-menu-item-group>
               <el-menu-item @click="clickMenu(subItem)" v-for="(subItem, subIndex) in item.children" :key="subIndex" :index="subItem.name">
                  <el-icon>
                     <component class="icons" :is="subItem.icon"></component>
                  </el-icon>
                  <span>{{ subItem.label }}</span>
               </el-menu-item>
            </el-menu-item-group>

         </el-sub-menu>



      </el-menu>

   </el-aside>
</template>


<script setup>
// 引入仓库
import { useAside } from '../store/index.js';
const main= useAside()



// 引入路由
import {useRouter}  from 'vue-router'
const router =useRouter()

const list = [
   {
      path: '/',
      name: 'home',
      label: '首页',
      icon: 'house',
   },
   {
      path: '/user',
      name: 'user',
      label: '用户管理',
      icon: 'avatar',
   },
   {
      label: '其他',
      icon: 'location',
      children: [
         {
            path: '/page1',
            name: 'page1',
            label: '页面一',
            icon: 'starFilled',
         },
         {
            path: '/page2',
            name: 'page2',
            label: '页面二',
            icon: 'starFilled',
         },
      ]
   }
]

const onChildren = () => {
   return list.filter((item) => !item.children)
}
const hasChildren = () => {
   return list.filter((item) => item.children)
}
// 点击侧边栏item
const clickMenu =(val)=>{
   // console.log(val);
   router.push({
      name:val.name
   })
   main.selectMenu(val)
}



</script>


<style lang="less">
.aside-box{
   background-color: #666;
}
.aside-title{
   color: #fff;
   font-weight: 700;
   line-height: 45px;
   text-align: center;
}

</style>